{% assign SectionId = "qz-" | append: section.id %}
<style>
body,main#MainContent{
  overflow: unset;
}
.qzsat-main {
    height: 300vh;
    background: #fbf4ff;
}
.qzsat-scroll {
    position: sticky;
    top: 0;
    right: 0;
    z-index: 0;
    text-align: right;
    overflow: hidden; 
}
.qzsat-background {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}
.qzsat-template1, .qzsat-template2 {
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: 2;
    display: flex;
    align-items: center;
    transform: translateY(50vh);
    opacity: 0;
    transition: all 0.3s;
}
.qzsat-template1.open,.qzsat-template2.open {
    opacity: 1;
    transform: translateY(0);
}
.qzsat-scroll {
    position: sticky;
    top: 0;
    right: 0;
    z-index: 0;
    text-align: right;
    width: 100vw;
    height: 100vh;
}
</style>
<div class="qzsat-main {{ SectionId }}">
    <div class="qzsat-scroll">
        <div class="qzsat-background">
            <img src="https://www.namenecklace.com/cdn/shop/files/TKNL0P557X03.jpg">
        </div>
        <div class="qzsat-template1">
           <div class="qzsat-left qzsat-item">
             {% for block in section.blocks %}               
             <div class="qzsat-list">
               <img class="qzcscl-list-img" src="{{ block.settings.icon | img_url: 'master' }}" />
               <span>{{ block.settings.text }}</span>
             </div>
             {% endfor %}
           </div>
        </div>
        
        <div class="qzsat-template2">
            <div class="qzsat-left qzsat-text">
              
            </div>
        </div>
    </div>
</div>
<script>
if($(window).width()>768){
  $(window).on('scroll', function(){
    let targetChars=$(".{{ SectionId }}");
    let targetOffsetTop =targetChars.offset().top;
    let windowScroll = $(window).scrollTop();
    let windowHeight = $(window).height();
    let ScrollAnimationStart1=windowScroll-targetOffsetTop;
    let ScrollAnimationEnd1=windowScroll-(targetOffsetTop+windowHeight);
    let ScrollAnimationStart2=windowScroll-(targetOffsetTop+windowHeight);
    
    if(ScrollAnimationStart1>0&&ScrollAnimationEnd1<0){
      targetChars.find(".qzsat-template1").addClass("open");
    }else{
      targetChars.find(".qzsat-template1").removeClass("open");
    }
    if(ScrollAnimationStart2>0){
      targetChars.find(".qzsat-template2").addClass("open");
    }else{
      targetChars.find(".qzsat-template2").removeClass("open");
    }
  })
}
</script>

{% schema %}
  {
    "name": "通用 - 滚动动画",
    "class": "qz-scroll-animation",
    "settings": [
      {
        "type": "color",
        "id": "bg",
        "label": "Background"
      },
      {
        "type": "image_picker",
        "id": "pc_img",
        "label": "PC Image"
      },
      {
        "type": "image_picker",
        "id": "mb_img",
        "label": "MB Image"
      },
      {
        "type": "image_picker",
        "id": "icon",
        "label": "Animation Icon"
      },
      {
        "type": "textarea",
        "id": "topt",
        "label": "Top Title"
      },
      {
        "type": "textarea",
        "id": "cont",
        "label": "Title"
      },
      {
        "type": "textarea",
        "id": "bott",
        "label": "Bottom Describe"
      }
    ],
    "blocks": [
      {
        "type": "item",
        "name": "item",
        "settings": [
          {
            "type": "image_picker",
            "id": "icon",
            "label": "Icon"
          },
          {
            "type": "textarea",
            "id": "text",
            "label": "Text"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "通用 - 滚动动画",
        "category": "通用"
      }
    ]
  }
{% endschema %}